<%--
  Created by IntelliJ IDEA.
  User: 钟
  Date: 2017/3/15
  Time: 17:05
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>


<link rel="stylesheet" href="${path}/css/themes/base/jquery.ui.all.css">
<script src="${path}/js/jquery-1.7.2.js"></script>
<script src="${path}/js/jquery.ui.core.js"></script>
<script src="${path}/js/jquery.ui.widget.js"></script>
<script src="${path}/js/jquery.ui.button.js"></script>
<link rel="stylesheet" href="${path}/css/demos.css">

<link rel="stylesheet" href="${path}/css/icons.css">

<script src="${path}/js/icons.js"></script>

<html>
<head>
    <title>联系人列表</title>
    <link rel="stylesheet" type="text/css" href="${path}/css/index.css" />
    <link rel="stylesheet" type="text/css" href="${path}/css/public.css" />
    <style type="text/css">
        .mytable {
            margin-top: 20px;
        }

        .mytable td {
            text-align: center;
        }
    </style>
    <script type="text/javascript">
        $(function() {
            $("#allcheck").click(function() {
                for ( var i = 0; i < $(".checkboxes").length; i++) {
                    $(".checkboxes")[i].checked = true;
                }
            });
            $("#recheck").click(function() {
                for ( var i = 0; i < $(".checkboxes").length; i++) {
                    $(".checkboxes")[i].checked = false;
                }
            });
            $("#change").click(function() {
                for ( var i = 0; i < $(".checkboxes").length; i++) {
                    $(".checkboxes")[i].checked = !$(".checkboxes")[i].checked;
                }
            });
            $("#btnClose").click(function() {
                window.close();
            });
            $("#btnConfirm").click(function() {

                var parentInput = dialogArguments;
                //TODO...设置隐藏域 owner ids
                var ids = "";
                var names = "";
                for ( var i = 0; i < $(".checkboxes").length; i++) {
                    if ($(".checkboxes")[i].checked == true) {
                        if (ids == "") {
                            ids += $(".checkboxes")[i].value;
                        } else {
                            ids += "," + $(".checkboxes")[i].value;
                        }
                        if (names == "") {
                            names += $("#roleName").html();
                        } else {
                            names += "," + $("#roleName").html();
                        }
                    }
                }
                parentInput.getElementById("roleListHidden").value = ids;
                //TODO...根据checkbox选项读取值
                parentInput.getElementById("roleListDisplay").value = names;

                window.close();
            });

        });
    </script>
</head>
<body>

<div class="pageBody">

    <form id="initOwnerList" name="initOwnerList" action="${path}/customer/initOwnerList.action" method="post">
        <button id="allcheck" type="button">全选</button>
        <button id="recheck" type="button">全不选</button>
        <button id="change" type="button">反选</button>
        <table class="mytable">
            <c:forEach items="${roles}" var="role">
                <tr>
                    <td>
                        <input type="checkbox" class="checkboxes"
                               name="roleId"
                               value="${role.id}">
                    </td>
                    <td id="roleName">${role.name}
                    </td>

                </tr>
            </c:forEach>
        </table>
        <div class="buttonBar">
            <button id="btnConfirm">确定</button>
            <button id="btnClose">关闭</button>
        </div>
    </form>




</div>
</body>
</html>
